<template>
  <div class="app-container">
    <!-- 登录和注册页面不显示侧边栏和 Header -->
    <router-view v-if="isLoginOrRegisterPage" />

    <!-- 其他页面显示侧边栏和 Header -->
    <div v-else class="main-layout">
      <Sidebar :is-collapse="isCollapse" />
      <div class="content">
        <Header />
        <div class="main-content">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
import Sidebar from '@/components/Aside.vue';
import Header from '@/components/Header.vue';

const route = useRoute();

// 判断当前页面是否是登录或注册页面
const isLoginOrRegisterPage = computed(() => {
  return route.path === '/login' || route.path === '/register';
});

// 侧边栏折叠状态
const isCollapse = ref(false);

// 监听侧边栏折叠事件
const handleCollapse = (event) => {
  isCollapse.value = event.detail;
};

onMounted(() => {
  window.addEventListener('toggle-collapse', handleCollapse);
});

onUnmounted(() => {
  window.removeEventListener('toggle-collapse', handleCollapse);
});
</script>

<style scoped>
.app-container {
  height: 100vh;
}

.main-layout {
  display: flex;
  height: 100%;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding: 20px;
  background-color: #f5f7fa;
  overflow-y:auto
}
</style>